<script setup>
import Toast from "@vant/weapp/dist/toast/toast";
import { applyForAgent, getAppluForResult } from "@/api/agent";
import { getUserInfoFn } from "@/api/login";
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";

const name = ref("");
const userInfo = ref({});
const reqState = ref([]);
onLoad(() => {
  getUserInfoData();
  getAppluForResultData();
});

const anewReqBtn = () => {
  reqState.value = [];
};

/**
 * 获取用户信息
 */
const getUserInfoData = async () => {
  const res = await getUserInfoFn();
  userInfo.value = res.data;
};

/**
 * 获取申请结果 state
 * 0: 申请中
 * 1: 申请成功
 * 2: 申请失败
 */
const getAppluForResultData = async () => {
  const res = await getAppluForResult();
  reqState.value = res.data;
};

const reqAgentBtn = async () => {
  if (!name.value) return Toast.fail("姓名不能为空");
  const data = {
    name: name.value,
    phone: userInfo.value.email,
  };
  await applyForAgent(data);
  Toast.success("申请已发送，请耐心等待");
  getAppluForResultData();
};
</script>

<template>
  <NavBar title="申请代理商"></NavBar>
  <div style="padding: 0 25rpx 0">
    <div class="requestAgent" v-if="!reqState.length">
      <p class="name">您的名字：</p>
      <input v-model="name" class="reqAgentInput" type="text" placeholder="请输入您的名字" />
      <van-button type="primary" class="reqAgentBtn" round size="large" @click="reqAgentBtn">申请代理商</van-button>
    </div>

    <div class="requestAgent" v-else>
      <p class="name">
        审核状态：
        <span :style="{ color: reqState[0].state === 0 ? '#FFB74C' : '#DB4544' }">{{ reqState[0].state === 0 ? "审核中" :
          "审核未通过" }}
        </span>
      </p>
      <div class="box">
        <i class="iconfont ai-icon-shenhezhong" :style="{ color: reqState[0].state === 0 ? '#FFB74C' : '#DB4544' }" />
        <p class="text">
          {{
            reqState[0].state === 0
            ? "管理员正在加急审核中请耐心等待"
            : reqState[0].remark
          }}
        </p>
        <van-button v-if="reqState[0].state === 2" @click="anewReqBtn">重新申请</van-button>
      </div>
    </div>
  </div>
  <van-toast id="van-toast"></van-toast>
</template>

<style lang="less" scoped>
.requestAgent {
  margin-top: 103rpx;

  .name {
    font-size: 28rpx;
    font-weight: 600;
    margin-bottom: 20rpx;
    color: var(--a-one-text-color);
  }

  .reqAgentInput {
    display: block;
    margin: 29rpx auto 0;
    padding-left: 20rpx;
    width: 686rpx;
    height: 86rpx;
    background: var(--a-main-box-bg-color);
    border-radius: 55rpx;
    margin-bottom: 30rpx;
    box-shadow: 10rpx 10rpx 10rpx rgba(0, 0, 0, 0.2);
    color: var(--a-one-text-color);
  }

  .box {
    margin-top: 200rpx;
    text-align: center;

    .iconfont {
      display: block;
      font-size: 200rpx;
    }

    .text {
      font-size: 26rpx;
      color: #b3b7bc;
      line-height: 40rpx;
      width: 320rpx;
      margin: 0 auto;
    }
  }

  ::v-deep {
    .van-button {
      width: 80%;
      height: 85rpx;
      line-height: 85rpx;
      border-radius: 44rpx;
      box-shadow: 10rpx 10rpx 10rpx rgba(0, 0, 0, 0.2);
      // margin-top: 106rpx;
      margin: 106rpx auto 0;
      display: block;
      border: none;
    }

    .box .van-button {
      // background-color: #14DFE9;
      background: linear-gradient(91deg, #14dfe9 20%, #8a5cfc 80%);
      color: #fff;
      // border: none;
    }
  }
}
</style>
